<template>
    <div>
        <el-upload class="upload-demo" action="" multiple :http-request="importExcel">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传Excel文件，且不超过500kb</div>
        </el-upload>

        <template>
            <el-table :data="calculateCostCollect" border stripe :summary-method="getSummaries" show-summary
                style="width: 100%" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
                <el-table-column fixed prop="title" label="成本项目">
                </el-table-column>
                <el-table-column prop="paper" label="账面认可成本">
                </el-table-column>
                <el-table-column prop="paper_no" label="账面不予认可成本">
                </el-table-column>
                <el-table-column prop="contract" label="合同调增金额">
                </el-table-column>
                <el-table-column prop="budget" label="预算调增金额">
                </el-table-column>
                <el-table-column prop="costs" label="预提成本">
                </el-table-column>
                <el-table-column prop="calculate" label="测算总金额">
                </el-table-column>
                <el-table-column prop="exclusive" label="专属成本金额">
                </el-table-column>
                <el-table-column prop="apportion" label="需分摊成本汇总">
                </el-table-column>
            </el-table>
        </template>
    </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import calculateApi from '@/api/calculate'


export default {
    data() {
        return {
            calculate_id: '',
            calculateCostCollect: [],


        }
    },
    methods: {

        //上传文件
        importExcel(file) {

            const formData = new FormData()
            formData.append('excel', file.file)


            this.$axios({
                method: 'post',
                url: '/calculate_excel/add_excel/' + this.calculate_id,
                headers: { 'Authorization': 'Bearer ' + getToken() },
                timeout: 30000,
                data: formData
            }).then(res => {

                this.handleSuccess();

            })

        },

        //上传成功后的回调
        handleSuccess() {
            this.getCalculateCostCollectList();
        },






        //获取成本汇总表数据
        getCalculateCostCollectList() {
            calculateApi.getCalculateCostCollect(this.calculate_id).then(response => {
                this.calculateCostCollect = response.data.list;
            })
        },

        //vue自动求和
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '总价';
                    return;
                }
                const values = data.map(item => Number(item[column.property]));
                if (!values.every(value => isNaN(value))) {
                    sums[index] = values.reduce((prev, curr) => {
                        const value = Number(curr);
                        if (!isNaN(value)) {
                            return prev + curr;
                        } else {
                            return prev;
                        }
                    }, 0);
                    sums[index] = sums[index].toFixed(2);
                    // sums[index] += ' ';
                } else {
                    sums[index] = 'N/A';
                }

            });

            return sums;
        }
    },

    created() {
        var query = this.$route.query;
        if (query.id) {
            this.calculate_id = query.id;
        }

        this.getCalculateCostCollectList();
    },
}
</script>

<style></style>